import { defineComponent, reactive, ref, toRefs } from 'vue'
import {
  NInput,
  NForm,
  NFormItem,
  NModal,
  FormRules,
  NSelect,
  SelectOption,
  NTreeSelect
} from 'naive-ui'
import { Response } from '@/service/modules/common/types'
import {
  createOrUpdateUdfReq,
  getResTreeReq
} from '@/service/modules/task-manage'

const ModUDFModal = defineComponent({
  name: 'ModUDFModal',
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    dsTypeOptions: {
      type: Array<SelectOption>,
      required: true
    },
    udfDefined: {
      type: Object,
      required: true
    }
  },
  emits: ['modalShowChange', 'refreshList'],
  setup() {
    const state = reactive({
      form: {
        id: '',
        name: '',
        description: '',
        dbType: 'HIVE',
        funcName: '',
        className: '',
        resourceId: null
      },
      positiveButtonDisabled: ref(false),
      rules: {
        name: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (state.form.name === '') {
              return new Error(window.$t('taskManage.udfNameTips'))
            }
          }
        },
        dbType: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (state.form.dbType === '') {
              return new Error(window.$t('taskManage.datasourceTypeTips'))
            }
          }
        },
        funcName: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (state.form.funcName === '') {
              return new Error(window.$t('taskManage.funcNameTips'))
            }
          }
        },
        className: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (state.form.name === '') {
              return new Error(window.$t('taskManage.classNameTips'))
            }
          }
        },
        resourceId: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (state.form.name === null) {
              return new Error(window.$t('taskManage.selectJarTips'))
            }
          }
        }
      } as FormRules
    })
    const jarResourceOption = ref([])
    return {
      ...toRefs(state),
      jarResourceOption
    }
  },
  watch: {
    udfDefined() {
      this.form.id = this.udfDefined.id
      this.form.name = this.udfDefined.name
      this.form.description = this.udfDefined.description
      this.form.dbType = this.udfDefined.dbType
      this.form.funcName = this.udfDefined.funcName
      this.form.className = this.udfDefined.className
      this.form.resourceId = this.udfDefined.resourceId
      this.getResourceTree()
    }
  },
  methods: {
    async onPositiveClick() {
      //输入框存在为空时则确认按钮无效
      if (
        this.form.name === '' ||
        this.form.dbType === '' ||
        this.form.funcName === '' ||
        this.form.className === '' ||
        this.form.resourceId === null
      ) {
        return
      }
      //提交创建或更新udf请求
      this.positiveButtonDisabled = true
      const res: Response<any> = await createOrUpdateUdfReq({
        ...this.form
      }).catch(() => {
        this.positiveButtonDisabled = false
      })
      if (res.resp_code === 0) {
        this.$emit('modalShowChange', false)
        this.$emit('refreshList')
        this.positiveButtonDisabled = false
      } else {
        this.positiveButtonDisabled = false
      }
    },
    onNegativeClick() {
      this.$emit('modalShowChange', false)
    },
    async getResourceTree() {
      this.jarResourceOption = []
      const res = await getResTreeReq()
      if (res.resp_code === 0) {
        this.jarResourceOption = res.data
      }
    }
  },
  render() {
    return (
      <NModal
        show={this.showModal}
        mask-closable={false}
        style='width: 400px'
        title={window.$t('taskManage.modUDF')}
        bordered={false}
        size='huge'
        preset='dialog'
        positive-text={window.$t('dialog.positiveText')}
        negative-text={window.$t('dialog.negativeText')}
        onPositiveClick={this.onPositiveClick}
        onNegativeClick={this.onNegativeClick}
        positiveButtonProps={{
          disabled:
            this.positiveButtonDisabled ||
            this.form.name === '' ||
            this.form.dbType === '' ||
            this.form.funcName === '' ||
            this.form.className === '' ||
            this.form.resourceId === null
        }}
        onClose={this.onNegativeClick}
      >
        <NForm
          rules={this.rules}
          label-placement='left'
          require-mark-placement='right'
          label-width='auto'
        >
          <NFormItem path='name' label={window.$t('taskManage.udfName')}>
            <NInput
              type='text'
              v-model={[this.form.name, 'value']}
              placeholder={window.$t('taskManage.udfNameTips')}
              autofocus
            />
          </NFormItem>
          <NFormItem path='description' label={window.$t('common.description')}>
            <NInput
              type='textarea'
              v-model={[this.form.description, 'value']}
              placeholder={window.$t('common.description')}
            />
          </NFormItem>
          <NFormItem
            path='dbType'
            label={window.$t('dataManage.datasourceType')}
          >
            <NSelect
              v-model:value={this.form.dbType}
              options={this.dsTypeOptions}
              placeholder={window.$t('dataManage.datasourceType')}
              disabled={true}
            />
          </NFormItem>
          <NFormItem path='funcName' label={window.$t('taskManage.funcName')}>
            <NInput
              type='text'
              v-model={[this.form.funcName, 'value']}
              placeholder={window.$t('taskManage.funcNameTips')}
              autofocus
            />
          </NFormItem>
          <NFormItem path='className' label={window.$t('taskManage.className')}>
            <NInput
              type='text'
              v-model={[this.form.className, 'value']}
              placeholder={window.$t('taskManage.classNameTips')}
              autofocus
            />
          </NFormItem>
          <NFormItem
            path='resourceId'
            label={window.$t('taskManage.jarResource')}
          >
            <NTreeSelect
              v-model:value={this.form.resourceId}
              options={this.jarResourceOption}
              label-field='name'
              key-field='id'
              children-field='childs'
              filterable
              clearable
              placeholder={window.$t('taskManage.selectJarTips')}
            />
          </NFormItem>
        </NForm>
      </NModal>
    )
  }
})

export default ModUDFModal
